// 函数是组件 
// 从16.8 开始 React添加了hook API 这些API配合函数式组件 实现类组件中有的功能
// 通过hook api 可以自定义状态
import { useEffect, useState, useRef } from 'react'
export default function Demo3(props) {
    // useState(1)   1是指 count状态的初始值为1
    let [count, setCount] = useState(1)
    let box = useRef(null)
    // console.log(props)
    // useEffect(() => {
    //     console.log('页面渲染完成')
    // }, []) // 传空数组 说明只会执行第一次监听

    useEffect(() => {
        var r = Math.round(Math.random() * 255);
        var g = Math.round(Math.random() * 255);
        var b = Math.round(Math.random() * 255);
        box.current.style.color = 'rgb(' + r + ',' + g + ',' + b + ')'
        // console.log('页面渲染完成/更新完成~~~')
    }, [count]) // 数组内有监听的数据 数据每次发生变化时 都会执行
    return (
        <div>
            <h1 ref={box}> {count} </h1>
            <button onClick={() => setCount(count + 1)}>+数字随机变色+</button>
        </div>
    )
}